<template>
<div class="w-full flex justify-center bg-cover bg-center md:mt-0 mt-3" :style="'background-image: url('+ state.document.support.image +') '">
    <div class="2xl:w-3/5 xl:w-4/5 md:w-full md:h-450 h-52 flex md:pl-20  items-center text-white">
        <div class="supportContainer">
            <div class="text-4xl font-medium  mb-3">{{state.document.support.title}}</div>
            <div class="text-xl mb-3">{{state.document.support.subtitle}}</div>
            <div class="text-sm text-blue-400">{{state.document.support.linkText}}</div>
        </div>
    </div>
</div>
</template>

<script lang="ts" setup>
import { state } from "@utils/store";

</script>

<style lang="scss">
.supportContainer div {
    text-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
</style>